<template>
  <area-layout>
    <template slot-scope="row">
      <HouseHolder
        v-if="row.currentAreaId"
        :currentAreaId="row.currentAreaId"
        :currentAreaName="row.currentAreaName"
        class="house-holder"
      />
      <Family v-if="row.currentAreaId" />
    </template>
  </area-layout>
</template>

<script>
// 演示如何使用 this.$dialog 封装 modal 组件

import { areaServices } from '@/common/services'
import AreaTree from '@/components/src/AreaTree'
import AreaLayout from '@/layouts/AreaLayout.vue'
import HouseHolder from './HouseHolder.vue'
import Family from './Family.vue'


export default {
  name: 'StandardList',
  components: {
    AreaTree,
    AreaLayout,
    HouseHolder,
    Family
  },
  data () {
    return {
      data: [],
      currentAreaId: '',
    }
  },
  mounted () {
  },
  methods: {
    handlerTreeSelect (data) {
      this.currentAreaId = data.s_a_id
    },
  }
}
</script>

<style lang="less" scoped>
.member-container {
  display: flex;
  .area-tree {
    width: 300px;
    flex: none;
    background-color: #fff;
    border-right: 1px solid #eee;
    margin-right: 10px;
  }
}
.house-holder /deep/ .ant-card-body {
  // max-height: 600px;
  height: auto;
}
.member-list {
  display: flex;
  flex-direction: column;
}
</style>
